<%--
  Created by IntelliJ IDEA.
  User: 高朋
  Date: 2020/11/10
  Time: 9:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>图书管理系统登录界面</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        /*设置背景*/
        body{
            background: url("imag/b9df996f7a034603e69f91725719ee70.jpg");
            background-size: 100%;
        }
        /*整体布局*/
        .bg{
            /* border: 1px solid blueviolet;*/
            width: 900px;
            margin:auto;
        }
        /*“图书管理系统”文字样式*/
        .title{
            /* border: 1px solid blueviolet;*/
            width: 650px;
            margin: auto;
            margin-top: 40px;
            font-size: 60px;
            font-family: 楷体;
            color: #040510;
        }
        /*设置表单整体布局*/
        .form{
            /*border: 1px solid blueviolet;*/
            width: 480px;
            margin: auto;
            margin-top: 120px;
            padding:10px;
        }
        /*设置表格左侧布局*/
        .td_left{
            /* border: 1px solid blueviolet;*/
            text-align: right;
            padding:10px
        }
        /*表格右侧布局*/
        .td_right
        {
            /* border: 1px solid blueviolet;*/
            padding:10px
        }
        /*文本输入框样式*/
        #password_input,#username_input{
            background: transparent;
            /*border: 1px solid gainsboro;*/
            padding: 5px;
            border-radius: 5px;
        }
        /*文本样式*/
        #password_text,#username_text{
            font-family: 楷体;
            font-style: inherit;
            font-weight: bold;
            font-size: 20px;
        }
        /*“用户登录”布局设置*/
        .td_userLogin{
            padding-bottom: 50px;
        }
        /*“用户登录”字体样式*/
        .userLogin{
            border: 3px solid blueviolet;
            border-radius: 10px;
            font-family: 楷体;
            font-size: 40px;
            font-weight: bold;
            padding:10px;
            margin-left: 90px;
        }
        /*登录按钮*/
        .btn{
            margin-top: 20px;
            margin-left: 140px;
        }
        /*设置输入格式错误字体样式*/
        #password_span,#username_span{
            color: red;
        }
    </style>

</head>
<body>

<div class="bg">
    <div class="title">
        <p>欢迎进入图书管理系统</p>
    </div>
    <div class="form">
        <form action="${pageContext.request.contextPath}/login.do" id="form" method="get">
            <table>
                <tr>
                    <td colspan="2" class="td_userLogin" ><span class="userLogin">用户登录</span></td>
                </tr>
                <tr>
                    <td class="td_left"><span id="username_text">用户名</span></td>
                    <td class="td_right"><input type="text" name="username" id="username_input" placeholder="请输入用户名">
                        <span id="username_span"></span></td>
                </tr>
                <tr>
                    <td class="td_left"><span id="password_text">密码</span></td>
                    <td class="td_right"><input type="password" name="password" id="password_input" placeholder="请输入密码">
                        <span id="password_span"></span> </td>
                </tr>
                <tr>
                    <td colspan="2" ><input type="submit" class="btn btn-success" value="登录"></td>
                </tr>
            </table>
        </form>
    </div>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>

<script>
    window.onload=function ()
    {
        //1、给表单绑定onsubmit事件
        document.getElementById("form").onsubmit=function ()
        {
            //用户名校验
            return checkUsername()&&checkPassword();
        }

        //绑定焦点离开事件
        document.getElementById("username_input").onblur=checkUsername;
        document.getElementById("password_input").onblur=checkPassword;

    }

    let right="<img width='35' height='25' margin-top='30px' src='imag/duigou.png'/>";
    function checkUsername()
    {
        //1、获取用户名的值
        let username = document.getElementById("username_input").value;
        //2、定义正则表达式
        let reg_username=/^\w{6,12}$/;

        let flag=reg_username.test(username);
        let s_username=document.getElementById("username_span");
        if(flag)
        {
            //提示绿色对勾
            s_username.innerHTML=right;
        }
        else
        {
            //提示红色错误
            s_username.innerHTML="用户名格式错误";
        }
        return flag;

    }

    function checkPassword()
    {
        //1、获取用户名的值
        let password = document.getElementById("password_input").value;
        //2、定义正则表达式
        let reg_password=/^\w{6,12}$/;

        let flag=reg_password.test(password);
        let s_password=document.getElementById("password_span");
        if(flag)
        {
            //提示绿色对勾
            s_password.innerHTML=right;
        }
        else
        {
            //提示红色错误
            s_password.innerHTML="密码格式错误";
        }
        return flag;

    }
</script>
</body>
</html>
